<!DOCTYPE html>
<html>
<head><meta name="generator" content="Hexo 3.9.0">
  <meta charset="utf-8">
  

  
  <title>前端鉴权总结 | 蔡进东的日志</title>
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <meta name="description" content="我们在访问网站时不可避免会遇到登录的问题，这归根到底就是访问权限的问题。前端鉴权方案主要有以下几种：  HTTP Basic Authentication：现在用的较少，主要用在一些较老的项目中。 session-cookie：依赖 cookie,只适用于 web 系统。 token: 目前主流鉴权方式，适用于多种客户端（浏览器、app 等）。 OAuth：第三方授权，方便快捷是以后的趋势。  一">
<meta name="keywords" content="鉴权,token,session-cookie">
<meta property="og:type" content="article">
<meta property="og:title" content="前端鉴权总结">
<meta property="og:url" content="http://cai4633.github.io/2021/01/08/前端鉴权总结/index.html">
<meta property="og:site_name" content="蔡进东的日志">
<meta property="og:description" content="我们在访问网站时不可避免会遇到登录的问题，这归根到底就是访问权限的问题。前端鉴权方案主要有以下几种：  HTTP Basic Authentication：现在用的较少，主要用在一些较老的项目中。 session-cookie：依赖 cookie,只适用于 web 系统。 token: 目前主流鉴权方式，适用于多种客户端（浏览器、app 等）。 OAuth：第三方授权，方便快捷是以后的趋势。  一">
<meta property="og:locale" content="zh-CN">
<meta property="og:image" content="http://cai4633.github.io/images/http_basic_authentication.png">
<meta property="og:image" content="http://cai4633.github.io/images/session_cookie.jpg">
<meta property="og:image" content="http://cai4633.github.io/images/token.jpg">
<meta property="og:image" content="http://cai4633.github.io/images/access_and_refresh_token.jpg">
<meta property="og:image" content="http://cai4633.github.io/images/jwt.jpg">
<meta property="og:image" content="http://cai4633.github.io/images/oauth.png">
<meta property="og:updated_time" content="2021-01-10T07:29:22.914Z">
<meta name="twitter:card" content="summary">
<meta name="twitter:title" content="前端鉴权总结">
<meta name="twitter:description" content="我们在访问网站时不可避免会遇到登录的问题，这归根到底就是访问权限的问题。前端鉴权方案主要有以下几种：  HTTP Basic Authentication：现在用的较少，主要用在一些较老的项目中。 session-cookie：依赖 cookie,只适用于 web 系统。 token: 目前主流鉴权方式，适用于多种客户端（浏览器、app 等）。 OAuth：第三方授权，方便快捷是以后的趋势。  一">
<meta name="twitter:image" content="http://cai4633.github.io/images/http_basic_authentication.png">
  
  
    <link rel="icon" href="/favicon.png">
  
  
    <link href="//fonts.googleapis.com/css?family=Source+Code+Pro" rel="stylesheet" type="text/css">
  
  <link rel="stylesheet" href="/css/style.css">
</head>
</html>
<body>
  <div id="container">
    <div id="wrap">
      <header id="header">
  <div id="banner"></div>
  <div id="header-outer" class="outer">
    <div id="header-title" class="inner">
      <h1 id="logo-wrap">
        <a href="/" id="logo">蔡进东的日志</a>
      </h1>
      
      <h2 id="subtitle-wrap">
        <a href="/" id="subtitle">不要在最该奋斗的年纪选择去偷懒，只有度过一段连自己都被感动了的日子，才能变成那个最好的自己.</a>
      </h2>
      
    </div>
    <div id="header-inner" class="inner">
      <nav id="main-nav">
        <a id="main-nav-toggle" class="nav-icon"></a>
        
        <a class="main-nav-link" href="/">Home</a>
        
        <a class="main-nav-link" href="/archives">Archives</a>
        
      </nav>
      <nav id="sub-nav">
        
        <a id="nav-search-btn" class="nav-icon" title="搜索"></a>
      </nav>
      <div class="local-search local-search-plugin">
        <input type="search" placeholder="站内搜索" id="local-search-input" class="local-search-input-cls" />
        <div id="local-search-result" class="local-search-result-cls"></div>
      </div>
      <!-- <div id="search-form-wrap">
        <form action="//google.com/search" method="get" accept-charset="UTF-8" class="search-form"><input type="search" name="q" class="search-form-input" placeholder="Search"><button type="submit" class="search-form-submit">&#xF002;</button><input type="hidden" name="sitesearch" value="http://cai4633.github.io"></form>
      </div> -->
    </div>
  </div>
</header>

      <div class="outer">
        <section id="main"><article id="post-前端鉴权总结" class="article article-type-post" itemscope itemprop="blogPost">
  <div class="article-meta">
    <a href="/2021/01/08/前端鉴权总结/" class="article-date">
  <time datetime="2021-01-08T03:17:13.000Z" itemprop="datePublished">2021-01-08</time>
</a>
    
  <div class="article-category">
    <a class="article-category-link" href="/categories/前端/">前端</a>
  </div>

  </div>
  <div class="article-inner">
    
    
      <header class="article-header">
        
  
    <h1 class="article-title" itemprop="name">
      前端鉴权总结
    </h1>
  

      </header>
    
    <div class="article-entry" itemprop="articleBody">
      
        <p>我们在访问网站时不可避免会遇到登录的问题，这归根到底就是访问权限的问题。前端鉴权方案主要有以下几种：</p>
<ol>
<li>HTTP Basic Authentication：现在用的较少，主要用在一些较老的项目中。</li>
<li>session-cookie：依赖 cookie,只适用于 web 系统。</li>
<li>token: 目前主流鉴权方式，适用于多种客户端（浏览器、app 等）。</li>
<li>OAuth：第三方授权，方便快捷是以后的趋势。</li>
</ol>
<h2 id="一、HTTP-Basic-Authentication"><a href="#一、HTTP-Basic-Authentication" class="headerlink" title="一、HTTP Basic Authentication"></a>一、HTTP Basic Authentication</h2><p>顾名思义，这种鉴权方式叫做 http 基本认证。<br><img src="/images/http_basic_authentication.png" alt="HTTP Basic Authentication 鉴权流程"></p>
<h3 id="鉴权流程"><a href="#鉴权流程" class="headerlink" title="鉴权流程"></a>鉴权流程</h3><ol>
<li>客户端发送 http 请求给服务器，服务器验证有无访问权限；</li>
<li>无访问权限时，服务器<strong>返回 401</strong>，客户端接收到 401 响应自动弹出登录验证对话框；</li>
<li>用户输入用户名和密码后，客户端将用户名和密码以 <code>name: password</code> 的形式采用 <code>base64</code> 编码方式编码，并放入请求头，再次发送请求；</li>
<li>服务器校验成功，返回数据。</li>
</ol>
<h3 id="应用场景"><a href="#应用场景" class="headerlink" title="应用场景"></a>应用场景</h3><p>这种鉴权方式的使用简单但安全性较差。配合 https 可以在<strong>内部网络</strong>，或者对安全要求不是很高的网络中使用，比较适合<strong>只需要一个特定密码</strong>就可以访问的场景。</p>
<h2 id="二、session-cookie"><a href="#二、session-cookie" class="headerlink" title="二、session-cookie"></a>二、session-cookie</h2><p>session 是此方案区别其他方式的核心。cookie 只是信息传递的<strong>载体</strong>。整个验证流程如下：</p>
<ol>
<li>浏览器登录时发送账号密码到服务端，服务端查询 User 库，校验用户</li>
<li>校验成功后，服务端把用户<strong>登录状态存到 session 中</strong>，同时生成一个对应的 sessionId 由登录接口返回，把 <strong>sessionId 存储到 cookie</strong>上</li>
<li>浏览器再次发送业务请求时，带有 sessionId 的 <strong>cookie 会自动添加到 Request Header 中</strong>发送到服务端</li>
<li>服务端通过 sessionId 在 session 库中查询，<strong>校验登录状态</strong></li>
<li>检验成功后，服务端<strong>进行业务处理并返回结果</strong><br><img src="/images/session_cookie.jpg" alt="session-cookie 鉴权流程"></li>
</ol>
<h3 id="session-的存储方式"><a href="#session-的存储方式" class="headerlink" title="session 的存储方式"></a>session 的存储方式</h3><ol>
<li>直接通过变量引用存储在<strong>服务器本地内存</strong>，缺点是服务器重启后，session 就会消失。</li>
<li>存储在<strong>普通数据库</strong>。缺点是性能不高。</li>
<li>（<code>推荐</code>）存储在<strong>Redis</strong>(内存型数据库)中。<strong>访问快，可持久存储</strong>。</li>
</ol>
<h3 id="分布式-session"><a href="#分布式-session" class="headerlink" title="分布式 session"></a>分布式 session</h3><p>大型应用的网络请求一般会采用负载均衡的优化方式。当业务请求和登录请求到达的服务器不是同一个时，普通的 session-cookie 鉴权就会出现 session 验证失败的问题！通常的解决方案如下：</p>
<ol>
<li>（<code>推荐</code>）从「存储」的角度来看，把 session 集中存储在独立的 Redis 或普通数据库中，就可以把 session 都存到一个库里。</li>
<li>从「分布」的角度来看，让相同 IP 的请求在负载均衡时都发送到同一台服务器上。以 nginx 为例，可以配置 ip_hash 来实现。</li>
</ol>
<h3 id="session-cookie-登录状态的有效期"><a href="#session-cookie-登录状态的有效期" class="headerlink" title="session-cookie 登录状态的有效期"></a>session-cookie 登录状态的有效期</h3><p>登录状态一般需要设置一定的有效期，采用 session-cookie 方案，一般可以从两个方面设置有效期：</p>
<ol>
<li>在 cookie 上设置。服务器返回 sessionId 是通过 <strong>set-cookie</strong> 响应头在浏览器上种下 cookie。此时就可以通过 cookie 属性 <strong>Expires / Max-Age</strong> 设置过期时间。</li>
</ol>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">Set-Cookie: sid=a3fWa; Expires=Wed, 21 Oct 2015 07:28:00 GMT; Secure;HttpOnly;path=/blog;Domain=baidu.com;Max-Age=240000</span><br></pre></td></tr></table></figure>

<ol start="2">
<li>在 session 上设置。服务器可以设置一段时间后<strong>删除 session</strong>，sessionId 校验查询不到 对应的 session 就相当于登录状态失效了。</li>
</ol>
<h2 id="三、token（推荐）"><a href="#三、token（推荐）" class="headerlink" title="三、token（推荐）"></a>三、token（<code>推荐</code>）</h2><p>session-cookie 方案通常是基于 cookie 的。而 <strong>cookie 只有浏览器才有</strong>，对于 app 应用，此方案有天生的缺陷。而且 session-cookie 方案<strong>需要内存存储</strong> session 和数据库查询, 加大了服务器负担。为了解决这些问题，token 鉴权方案应势而生。</p>
<ol>
<li>浏览器登录时发送账号密码到服务端，服务端查询 User 库，校验用户</li>
<li>校验成功后获得用户信息，把<strong>用户信息和 token 配置</strong>编码加密生成 token，通过 cookie set 到浏览器（或者通过<strong>响应头</strong>）</li>
<li>用户再次请求业务接口时，通过 cookie 携带 token（或者通过<strong>请求头</strong>）发送到服务端</li>
<li>服务器校验 token 有效性，进行业务逻辑处理并返回数据<br><img src="/images/token.jpg" alt="token 鉴权"><br><img src="/images/access_and_refresh_token.jpg" alt="更复杂的 token 鉴权（access token and refresh token）"></li>
</ol>
<h3 id="JWT（json-web-token）"><a href="#JWT（json-web-token）" class="headerlink" title="JWT（json web token）"></a>JWT（json web token）</h3><p>token 里面包含了一些用户信息，所以安全性就有一定的要求。token 加密的方法和信息传递的形式有很多种，其中业内采用较多的标准就是 jwt。它分为三部分，第一部分 header 是加密算法声明，第二部分 payload 是用户信息和一些数据，第三部分 signature 是签名。<br><img src="/images/jwt.jpg" alt="jwt"></p>
<h2 id="四、OAuth-第三方登录"><a href="#四、OAuth-第三方登录" class="headerlink" title="四、OAuth 第三方登录"></a>四、OAuth 第三方登录</h2><p>OAuth 2.0 是<strong>目前最流行</strong>的授权机制，用来授权第三方应用，获取用户数据。数据的所有者告诉系统，同意授权第三方应用进入系统，获取这些数据。系统从而产生一个短期的可进入令牌（token），用来代替密码，供第三方应用使用。OAuth2.0 有四种授权方式：</p>
<ol>
<li><p>授权码 code 式 （<code>推荐</code>）</p>
</li>
<li><p>隐藏式 （忽略请求授权码步骤，适用<strong>纯前端应用</strong>）</p>
</li>
<li><p>密码式 （只有高度可信任应用才使用，不安全，<code>不推荐</code>）</p>
</li>
<li><p>凭证式 （适用于没有前端的<strong>命令行应用</strong>）</p>
<p><img src="/images/oauth.png" alt="Oauth 第三方登录授权码方式"></p>
</li>
</ol>
<p>现在我们主要总结一下 <strong>授权码式</strong> 的授权逻辑：</p>
<ol>
<li>首先我们需要在 B 网站 （QQ、微信或者 github 等）上登记 A 网站信息，主要包括 A 网站的<strong>homepage_url 和 redirect_uri</strong> 等信息。登记后，B 网站会返回 <strong>client ID 和 client secret</strong> 用于后续请求的身份验证。</li>
<li>当我们登录 A 网站时，选择第三方授权。浏览器会携带<strong>client_id、redirect_uri</strong>等信息跳转到 B 网站授权页面，B 网站要求我们登录验证信息。（扫码或者输入密码）</li>
<li>用户登录 B 网站后，B 网站校验用户信息并携带 <code>code</code> 重定向到 <strong>redirect_uri</strong></li>
<li>A 网站后端接收到 code 后，再次携带 grant_type、client_id 、client_secret、code、redirect_uri 等信息向 B 网站服务器<strong>请求 token</strong></li>
<li>B 网站后端校验 code 等信息，再次向 redirect_uri 返回<strong>access token 和 refresh token</strong></li>
<li>A 网站服务器拿到 token 后就会根据自身需求处理相关业务逻辑或者重定向到 A 网站首页</li>
</ol>
<h2 id="参考文章："><a href="#参考文章：" class="headerlink" title="参考文章："></a>参考文章：</h2><ul>
<li><a href="https://zhuanlan.zhihu.com/p/281414244" target="_blank" rel="noopener">前端鉴权的兄弟们：cookie、session、token、jwt、单点登录</a></li>
<li><a href="http://www.ruanyifeng.com/blog/2019/04/oauth_design.html" target="_blank" rel="noopener">OAuth 2.0 的一个简单解释</a></li>
<li><a href="http://www.ruanyifeng.com/blog/2019/04/oauth-grant-types.html" target="_blank" rel="noopener">OAuth 2.0 的四种方式</a></li>
<li><a href="http://www.ruanyifeng.com/blog/2019/04/github-oauth.html" target="_blank" rel="noopener">GitHub OAuth 第三方登录示例教程</a></li>
</ul>

      
    </div>
    <footer class="article-footer">
      <!--<a data-url="http://cai4633.github.io/2021/01/08/前端鉴权总结/" data-id="ckjqth4sf002q2gw0fggoxo9r" class="article-share-link">Share</a>-->
      
      
  <ul class="article-tag-list"><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/session-cookie/">session-cookie</a></li><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/token/">token</a></li><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/鉴权/">鉴权</a></li></ul>

    </footer>
  </div>
  <!---->
    <!--
<nav id="article-nav">
  
  
    <a href="/2021/01/03/web性能优化/" id="article-nav-older" class="article-nav-link-wrap">
      <strong class="article-nav-caption">Older</strong>
      <div class="article-nav-title">web性能优化</div>
    </a>
  
</nav>
-->
  <!---->
</article>

</section>
        
          <aside id="sidebar">
  
    
  <div class="widget-wrap">
    <h3 class="widget-title">最新文章</h3>
    <div class="widget">
      <ul>
        
          <li>
            <a href="/2021/01/08/前端鉴权总结/">前端鉴权总结</a>
          </li>
        
          <li>
            <a href="/2021/01/03/web性能优化/">web性能优化</a>
          </li>
        
          <li>
            <a href="/2020/12/31/nodejs入门/">nodejs 入门</a>
          </li>
        
          <li>
            <a href="/2020/12/27/vue单页面应用白屏屏优化/">vue单页面应用白屏屏优化</a>
          </li>
        
          <li>
            <a href="/2020/12/26/逸辰音乐问题点/">逸辰音乐问题点</a>
          </li>
        
      </ul>
    </div>
  </div>

  
    
  <div class="widget-wrap">
    <h3 class="widget-title">归档</h3>
    <div class="widget">
      <ul class="archive-list"><li class="archive-list-item"><a class="archive-list-link" href="/archives/2021/01/">一月 2021</a></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2020/12/">十二月 2020</a></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2020/09/">九月 2020</a></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2020/08/">八月 2020</a></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2020/07/">七月 2020</a></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2020/05/">五月 2020</a></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2020/04/">四月 2020</a></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2020/03/">三月 2020</a></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2020/02/">二月 2020</a></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2019/11/">十一月 2019</a></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2019/10/">十月 2019</a></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2019/07/">七月 2019</a></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2019/06/">六月 2019</a></li></ul>
    </div>
  </div>


  
    
  <div class="widget-wrap">
    <h3 class="widget-title">分类</h3>
    <div class="widget">
      <ul class="category-list"><li class="category-list-item"><a class="category-list-link" href="/categories/ES6/">ES6</a></li><li class="category-list-item"><a class="category-list-link" href="/categories/Vue/">Vue</a></li><li class="category-list-item"><a class="category-list-link" href="/categories/css/">css</a></li><li class="category-list-item"><a class="category-list-link" href="/categories/git/">git</a></li><li class="category-list-item"><a class="category-list-link" href="/categories/html/">html</a></li><li class="category-list-item"><a class="category-list-link" href="/categories/js/">js</a></li><li class="category-list-item"><a class="category-list-link" href="/categories/nodejs/">nodejs</a></li><li class="category-list-item"><a class="category-list-link" href="/categories/vue/">vue</a></li><li class="category-list-item"><a class="category-list-link" href="/categories/前端/">前端</a></li><li class="category-list-item"><a class="category-list-link" href="/categories/前端项目/">前端项目</a></li><li class="category-list-item"><a class="category-list-link" href="/categories/服务端/">服务端</a></li><li class="category-list-item"><a class="category-list-link" href="/categories/算法/">算法</a></li></ul>
    </div>
  </div>


  
    
  <div class="widget-wrap">
    <h3 class="widget-title">标签</h3>
    <div class="widget">
      <ul class="tag-list"><li class="tag-list-item"><a class="tag-list-link" href="/tags/Apache/">Apache</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/Array/">Array</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/BFC/">BFC</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/CORS/">CORS</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/DOM/">DOM</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/DOM-diff/">DOM diff</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/JSONP/">JSONP</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/Vue3/">Vue3</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/absolute/">absolute</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/ajax/">ajax</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/auto/">auto</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/background/">background</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/const/">const</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/devServer/">devServer</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/function/">function</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/git/">git</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/github/">github</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/hexo/">hexo</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/host/">host</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/html/">html</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/http/">http</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/jquery/">jquery</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/js/">js</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/leancloud/">leancloud</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/let/">let</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/nodejs/">nodejs</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/npm/">npm</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/position/">position</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/promise/">promise</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/proxy/">proxy</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/script标签/">script标签</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/session-cookie/">session-cookie</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/token/">token</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/v-if/">v-if</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/v-show/">v-show</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/vDOM/">vDOM</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/vHost/">vHost</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/vue/">vue</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/vue-cli/">vue-cli</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/vuec/">vuec</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/vue生命周期/">vue生命周期</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/width/">width</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/z-index/">z-index</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/原型链/">原型链</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/同源/">同源</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/外边距/">外边距</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/层叠上下文/">层叠上下文</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/性能优化/">性能优化</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/数据结构/">数据结构</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/浏览器/">浏览器</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/百分比/">百分比</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/算法/">算法</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/精华/">精华</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/软件下载/">软件下载</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/鉴权/">鉴权</a></li></ul>
    </div>
  </div>


  
    
  <div class="widget-wrap">
    <h3 class="widget-title">标签云</h3>
    <div class="widget tagcloud">
      <a href="/tags/Apache/" style="font-size: 10px;">Apache</a> <a href="/tags/Array/" style="font-size: 10px;">Array</a> <a href="/tags/BFC/" style="font-size: 10px;">BFC</a> <a href="/tags/CORS/" style="font-size: 10px;">CORS</a> <a href="/tags/DOM/" style="font-size: 10px;">DOM</a> <a href="/tags/DOM-diff/" style="font-size: 10px;">DOM diff</a> <a href="/tags/JSONP/" style="font-size: 10px;">JSONP</a> <a href="/tags/Vue3/" style="font-size: 10px;">Vue3</a> <a href="/tags/absolute/" style="font-size: 10px;">absolute</a> <a href="/tags/ajax/" style="font-size: 10px;">ajax</a> <a href="/tags/auto/" style="font-size: 10px;">auto</a> <a href="/tags/background/" style="font-size: 10px;">background</a> <a href="/tags/const/" style="font-size: 10px;">const</a> <a href="/tags/devServer/" style="font-size: 10px;">devServer</a> <a href="/tags/function/" style="font-size: 10px;">function</a> <a href="/tags/git/" style="font-size: 10px;">git</a> <a href="/tags/github/" style="font-size: 10px;">github</a> <a href="/tags/hexo/" style="font-size: 10px;">hexo</a> <a href="/tags/host/" style="font-size: 10px;">host</a> <a href="/tags/html/" style="font-size: 10px;">html</a> <a href="/tags/http/" style="font-size: 16.67px;">http</a> <a href="/tags/jquery/" style="font-size: 10px;">jquery</a> <a href="/tags/js/" style="font-size: 20px;">js</a> <a href="/tags/leancloud/" style="font-size: 10px;">leancloud</a> <a href="/tags/let/" style="font-size: 10px;">let</a> <a href="/tags/nodejs/" style="font-size: 10px;">nodejs</a> <a href="/tags/npm/" style="font-size: 10px;">npm</a> <a href="/tags/position/" style="font-size: 10px;">position</a> <a href="/tags/promise/" style="font-size: 10px;">promise</a> <a href="/tags/proxy/" style="font-size: 10px;">proxy</a> <a href="/tags/script标签/" style="font-size: 10px;">script标签</a> <a href="/tags/session-cookie/" style="font-size: 10px;">session-cookie</a> <a href="/tags/token/" style="font-size: 10px;">token</a> <a href="/tags/v-if/" style="font-size: 10px;">v-if</a> <a href="/tags/v-show/" style="font-size: 10px;">v-show</a> <a href="/tags/vDOM/" style="font-size: 10px;">vDOM</a> <a href="/tags/vHost/" style="font-size: 10px;">vHost</a> <a href="/tags/vue/" style="font-size: 13.33px;">vue</a> <a href="/tags/vue-cli/" style="font-size: 10px;">vue-cli</a> <a href="/tags/vuec/" style="font-size: 10px;">vuec</a> <a href="/tags/vue生命周期/" style="font-size: 10px;">vue生命周期</a> <a href="/tags/width/" style="font-size: 10px;">width</a> <a href="/tags/z-index/" style="font-size: 10px;">z-index</a> <a href="/tags/原型链/" style="font-size: 10px;">原型链</a> <a href="/tags/同源/" style="font-size: 10px;">同源</a> <a href="/tags/外边距/" style="font-size: 10px;">外边距</a> <a href="/tags/层叠上下文/" style="font-size: 10px;">层叠上下文</a> <a href="/tags/性能优化/" style="font-size: 13.33px;">性能优化</a> <a href="/tags/数据结构/" style="font-size: 10px;">数据结构</a> <a href="/tags/浏览器/" style="font-size: 16.67px;">浏览器</a> <a href="/tags/百分比/" style="font-size: 10px;">百分比</a> <a href="/tags/算法/" style="font-size: 10px;">算法</a> <a href="/tags/精华/" style="font-size: 10px;">精华</a> <a href="/tags/软件下载/" style="font-size: 10px;">软件下载</a> <a href="/tags/鉴权/" style="font-size: 10px;">鉴权</a>
    </div>
  </div>

  
</aside>
        
      </div>
      <footer id="footer">
  
  <div class="outer">
    <div id="footer-info" class="inner">
      &copy; 2021 <a href="http://github.com/cai4633/cai4633.github.io" target="_blank">Cai4633</a><br>
      <!--Powered by <a href="http://hexo.io/" target="_blank">Hexo</a>-->
    </div>
  </div>
</footer>
    </div>
    <nav id="mobile-nav">
  
    <a href="/" class="mobile-nav-link">Home</a>
  
    <a href="/archives" class="mobile-nav-link">Archives</a>
  
</nav>
    

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/2.0.3/jquery.min.js"></script>


  <link rel="stylesheet" href="/fancybox/jquery.fancybox.css">
  <script src="/fancybox/jquery.fancybox.pack.js"></script>


<script src="/js/script.js"></script>



    <script>
      let isMobile = false
      if (/Android|webOS|iPhone|iPad|BlackBerry/i.test(navigator.userAgent)) {
        isMobile = true
        $("#nav").addClass("is-mobile")
        $("footer").addClass("is-mobile")
      }
      if ($(".local-search").size()) {
        $.getScript("/js/search.js", function () {
          searchFunc("/search.xml", "local-search-input", "local-search-result")
        })
      }
    </script>
  </div>
</body>
</html>